<!-- 多选下拉框 -->
<template>
  <div :class="['select-multiple', isTree ? 'select-tree' : '']">
    <label v-if="selectLabel">{{ selectLabel }}：</label>
    <el-select v-model="value" :multiple="multiple" clearable placeholder="请选择" ref="elSelect" collapse-tags :popper-append-to-body="false" @remove-tag="handleRemoveTag" @clear="clearableInput">
      <template v-if="!isTree">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </template>
      <template v-if="isTree">
        <searchInputBox placeholder="请输入" ref="searchInputBox" :cleanBtnShow="false" @handleSearch="handleSearch" />
        <el-option :value="selectTree" class="setstyle">
          <el-tree class="custom-tree" :render-content="rendContent" :data="options" :props="defaultProps" ref="tree" :filter-node-method="filterNode" node-key="id"  :highlight-current="true" @node-click="handleNodeClick" :default-expand-all="false" :show-checkbox="multiple" :check-strictly="true" :expand-on-click-node="selectableRange != 'code' ? false : true" @check="hanleNodeCheck"></el-tree>
        </el-option>
      </template>
    </el-select>
  </div>
</template>

<script>
import searchInputBox from './searchInputBox.vue'
export default {
  props: {
    // 正常数据需要在传入数据前处理数据格式为{value:'',label:''}
    options: {
      type: Array,
      default: () => []
    },
    // 输入框前边的名称比如  地区
    selectLabel: {
      type: String,
      default: () => ''
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: () => true
    },
    // 是否是树形数据
    isTree: {
      type: Boolean,
      default: () => false
    },
    // 树形表格是否有搜索
    isSearch: {
      type: Boolean,
      default: () => false
    },
    // 可选层级  主要针对树形选项
    // 补充工程量清单 仅支持六位清单编码，传code
    // 部门管理的不可选择10级
    selectableRange: {
      type: String,
      default: () => ''
    },
    departmentId: {
      type: Array,
      default: () => []
    }
  },
  name: '',
  components: {
    searchInputBox
  },
  data() {
    return {
      value: null,
      selectTree: [],
      selectData: {},
      defaultProps: {
        children: 'children',
        label: 'label'  
      },
      params: {
        keyword: ''
      }
    }
  },
  watch: {
    value(val) {
      if (this.isTree) {
        if (val == '' || val == []) {
          this.selectTree = []
        }
        this.$emit('selectVal', val)
      } else {
        let objArr = []
        if (this.multiple) {
          val.map((item, index) => {
            let obj = this.options.find(it => it.value == item)
            objArr[index] = obj
          })
        } else {
          this.selectData = this.options.find(it => it.value == val)
        }
        this.$emit('selectVal', val, objArr)
      }
    },
    'params.keyword'(val) {
      this.$refs.tree.filter(val)
    }
  },
  computed: {},
  created() {
   },
  mounted() {
    if (this.departmentId.length > 0) {
      this.$nextTick(() => {
        this.$refs.tree.setCheckedKeys(this.departmentId)
        this.selectTree = this.departmentId
        this.value = this.$refs.tree.getCheckedNodes().map(item => {
          return item.name
        })
      })
    }
  },
  methods: {
    handleNodeClick(data, self, child) {
      console.log(7);
      if (this.multiple) return
      if (this.selectableRange == 'code') {
        if (data.level == 3) {
          this.selectTree = data.id
          this.value = data.name
          this.selectData = data
          this.$refs.elSelect.blur()
        }
      } else {
        this.selectTree = data.id
        this.value = data.name
        this.selectData = data
        this.$refs.elSelect.blur()
      }
    },
    hanleNodeCheck() {
      console.log(5,'.5');
      this.value = this.$refs.tree.getCheckedNodes().map(item => {
        return item.name
      })
      this.selectTree = this.$refs.tree.getCheckedNodes().map(item => {
        return item.id
      })
    },
    handleRemoveTag(tag) {
      if (this.isTree && this.multiple) {
        let checkArr = this.$refs.tree.getCheckedNodes()
        checkArr = checkArr.filter(item => item.name != tag)
        this.$refs.tree.setCheckedNodes(checkArr)
      }
    }, 
    filterNode(value, data, node) {
      if (!value) return true
      let parentNode = node.parent,
        labels = [node.label],
        level = 1
      while (level < node.level) {
        labels = [...labels, parentNode.label]
        parentNode = parentNode.parent
        level++
      }
      return labels.some(label => label.indexOf(value) !== -1)
    },
    handleSearch(val) {
      this.params.keyword = val
    },
    // 方法
    rendContent(h, { node, data }) {
      // if (this.$route.path != '/checklistGuide/inventoryList') return
      let hightdata = typeof this.selectTree == 'object' ? this.selectTree : [this.selectTree]
      if (hightdata.indexOf(data.id) != -1) {
        return <span class="hightli">{data.name}</span>
      } else {
        return <span>{data.name}</span>
      }
    },
    clearableInput() {
      this.selectData = {}
      this.selectTree = []
      this.params.keyword = ''
      if (this.isTree) this.$refs.tree.setCheckedKeys([])
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.select-multiple {
  display: flex;
  align-items: center;
  > label {
    color: #475774;
    margin-right: 5px;
    white-space: nowrap;
  }
  // 统一修改部分element的样式
  ::v-deep.el-select {
    width: 300px;
    .el-select__tags {
      flex-wrap: nowrap;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      .el-tag.el-tag--info {
        background: rgba(224, 127, 0, 0.08);
        border-radius: 2px;
        color: #f5a019;
        font-size: 12px;
        font-weight: 400;
        border: none;
        height: 20px;
      }
      .el-tag__close.el-icon-close {
        background: none;
      }
    }
    .el-input {
      height: 32px;
      line-height: 32px;
      .el-input__inner {
        height: 100% !important;
      }
      .el-input__icon {
        line-height: 32px;
      }
    }
    &:hover {
      .el-input__inner {
        border-color: #2c7af1;
      }
    }
    .el-select-dropdown {
      .el-select-dropdown__item {
        width: 100%px;
        // width: 310px;
        margin: 3px 12px;
      }
      .el-select-dropdown__item.selected,
      .el-select-dropdown__item:hover {
        background: rgba(245, 160, 25, 0.08);
        border-radius: 2px 2px 2px 2px;
        color: #f5a019;
      }
    }
    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
      color: #f5a019;
      background: rgba(245, 160, 25, 0.08);
    }
  }
}
.select-tree {
  ::v-deep.el-select {
    width: 100%;
    .el-select-dropdown {
      .el-select-dropdown__item {
        height: auto;
        padding: 0;
      }
      .el-select-dropdown__item.hover {
        background: #fff;
      }
      .el-tree-node__content:hover,
      .el-upload-list__item:hover {
        color: #f5a019;
        background: rgba(245, 160, 25, 0.08);
      }
      .el-tree--highlight-current
        .el-tree-node.is-current
        > .el-tree-node__content {
        color: #f5a019;
        background: rgba(245, 160, 25, 0.08);
      }
    }
  }
  ::v-deep.samll-search-clean-box {
    width: calc(100% - 30px);
    margin: 0 15px;
    .el-input-group {
      width: 100%;
      .el-input__inner {
        width: 100%;
      }
    }
  }
}

::v-deep.custom-tree {
  .el-tree-node__content {
    display: flex;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .hightli {
    color: #f5a019;
    background: rgba(245, 160, 25, 0.08);
    margin-left: -55px;
    padding-left: 55px;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
  }
}
</style>
